<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div style="text-align: left">
        <el-card>
            <el-header>
                <ft-return-btn text="返回列表" @click="goBack()"></ft-return-btn>
                <el-button v-if="formData.confirmStatus=='UNCONFIRMED'"
                           type="primary"
                           size="small"
                           style="float: right"
                           @click="clickConfirm"
                           :disabled="!formDisabled">确认
                </el-button>
                <el-button v-if="!editShow" size="small" style="float: right" @click="clickCancel">取消</el-button>
                <el-button v-if="!editShow" type="primary" style="float: right" size="small" @click="clickSave">保存</el-button>
            </el-header>
            <div>
                <span v-if="formData.confirmStatus=='UNCONFIRMED' && editShow">
                    <el-button style="float: right;" size="small" @click="edit()" plain>编辑</el-button>
                </span>
            </div>
            <el-form ref="formRef" size="small" :model="formData" label-width="100px"
                :inline="true" :disabled="formDisabled" style="padding: 20px 20px 0 0;">
                <div>
                    <span class="titleClass">
                        {{formData.customerName}}
                        &nbsp;{{formData.ratingGrade}}
                        &nbsp;{{'('+formData.totalScore+')'}}
                    </span>
                </div>
                <div>
                    <el-row>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="评级模板">
                                <span>{{formData.templateName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="证件类型">
                                <span>{{formData.identityType==null ? '' : formData.identityType.label}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="证件号码">
                                <span>{{formData.identityNo}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="企业类型">
                              <ft-data-cascader
                                style="width: 100%"
                                v-model="formData.enterpriseTypeId"
                                type-name="enterpriseType"
                                :editable="false">
                              </ft-data-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="行业门类">
                                <ft-data-enum-select
                                  v-model="formData.industry"
                                  type-name="industryCategories"
                                  :editing="false">
                                </ft-data-enum-select>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                          <el-form-item label="行业大类">
                            <ft-data-enum-select
                              v-model="formData.industryBig"
                              type-name="industryCategories"
                              :query-child="true"
                              :parent-id="formData.industry"
                              :editing="false">
                            </ft-data-enum-select>
                          </el-form-item>
                        </el-col>
                        <el-col :md="8" :lg="6">
                            <el-form-item label="评级日期">
                                <span>{{formData.creationDate}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </el-card>
        <el-card v-if="formData.customerRatingId">
            <ft-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
                <ft-tab-pane
                    v-for="item in formData.ratingElement"
                    :key="item.quotaCategorySubId"
                    :label="item.quotaCategorySubName"
                    :name="item.quotaCategorySubName">
                    <el-card class="el-card-tab">
                        <el-table v-if="!formDisabled" :data="item.indicationDOS" style="width: 100%; color: black" tooltip-effect="light">
                            <el-table-column label="参数名称" align="left">
                                <template slot-scope="scope">
                                    <div v-for="(dimension, index) in scope.row.scoreDimensionVOS" :key="dimension.scoreDimensionId">
                                        <span v-if="!formDisabled&&scope.row.quotaProperty=='QUALITATIVE'" class="score-span">
                                            {{dimension.scoreDimensionName}}（请从以下待选项中选择最合适的评级因素）
                                        </span>
                                        <span v-if="!formDisabled&&scope.row.quotaProperty=='QUANTITATIVE'" class="score-span">
                                            {{dimension.scoreDimensionName}}
                                        </span>
                                        <br v-if="!formDisabled">
                                        <el-radio-group v-if="!formDisabled" v-model="dimension.choice">
                                            <ul v-for="score in dimension.scoreVOS" :key="score.scoreId">
                                                <li>
                                                    <el-radio v-if="!formDisabled"
                                                              :label="score.scoreId"
                                                              :disabled="scope.row.quotaProperty=='QUANTITATIVE' ? true : false">
                                                              {{score.scoreResult}}
                                                    </el-radio>
                                                </li>
                                            </ul>
                                        </el-radio-group>
                                        <hr v-if="scope.row.scoreDimensionVOS.length > 1 && index < scope.row.scoreDimensionVOS.length-1" class="hrClass">
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-table v-else :data="restructureTableData(item.indicationDOS)" style="width: 100%; color: black" tooltip-effect="light" key="item">
                            <el-table-column label="参数名称" prop="scoreDimensionName" min-width="100" align="left" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column label="计分结果" min-width="260" align="left" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    {{generate(scope.row.choice, scope.row, scope.row.scoreVOS, scoreResultFlag)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="得分" min-width="100" align="right" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    {{generate(scope.row.choice, scope.row, scope.row.scoreVOS, scoreFlag)}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </ft-tab-pane>
            </ft-tabs>
        </el-card>
    </div>
</template>

<script>
export default {
    props: {
        propsData: {
            type: Object,
            default: null
        },
        isFormDisabled: {
            type: Boolean,
            default: true
        },
        propActiveName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            //默认显示tab页签
            activeName: '',
            //编辑显示控制
            editShow: false,
            //不可编辑
            formDisabled: true,
            //表单数据（用于取消数据回退）
            rollBackFormData: {},
            //表单数据
            formData: {},
            //返回结果：scoreResult
            scoreResultFlag: 'scoreResult',
            //返回结果：score
            scoreFlag: 'score',
        }
    },
    mounted(){
        this.formData=JSON.parse(JSON.stringify(this.propsData))
        this.activeName=JSON.parse(JSON.stringify(this.propActiveName))
        this.rollBackFormData=JSON.parse(JSON.stringify(this.propsData))
        this.editShow=this.isFormDisabled
        this.formDisabled=this.isFormDisabled
    },
    methods: {
        //tab chang事件
        handleClick(tab, event){
            this.activeName = tab.name
        },
        //返回列表
        goBack(){
            this.$emit("returnList")
        },
        //编辑
        edit() {
            this.editShow=false
            this.formDisabled=false
            this.rollBackFormData=JSON.parse(JSON.stringify(this.formData))
        },
        //模版信息保存
        clickSave(){
            let url = "/joys-rest/lss-customer/rating/save"
            this.$http.put(url, this.formData).then(
                resp => {
                    this.formData = resp.body
                    this.formDisabled=true
                    this.editShow=true
                    this.$message.success("保存成功！")
                    this.rollBackFormData=JSON.parse(JSON.stringify(resp.body))
                },
                resp => {
                    this.$message.error(resp.body.message)
                }
            )
        },
        //取消
        clickCancel(){
            this.formData=JSON.parse(JSON.stringify(this.rollBackFormData))
            this.editShow=true
            this.formDisabled=true
        },
        //确认
        clickConfirm(){
            this.$confirm('确认后将不能再调整, 是否继续?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = "/joys-rest/lss-customer/rating/confirm"
                this.$http.put(url + "/" + this.formData.customerRatingId).then(
                    resp => {
                        this.formData = resp.body
                        this.$message.success('已确认！')
                    },
                    resp => {
                        this.$message.error("确认失败！")
                    }
                )
            }).catch(() => {
                this.$message.info('已取消确认')
            })
        },
        //当选项值Id与选项数组的元素匹配时，显示当前选项值
        generate(val, row, arr, flag){
            for (let a = 0;a < arr.length;a++){
                if (arr[a].scoreId == val) {
                    if(flag=='score'){
                        return arr[a].score
                    }else{
                        if(row.quotaProperty=='QUALITATIVE'){
                            return arr[a].scoreResult
                        }else{
                            return arr[a].actualResult
                        }
                    }
                }
            }
        },
        //重构tableData
        restructureTableData(data){
            if(data && data.length > 0){
                for (let i in data) {
                    let quotaProperty = data[i].quotaProperty
                    let scoreDimensionVOS = data[i].scoreDimensionVOS
                    for (let j in scoreDimensionVOS) {
                        let scoreDimension = scoreDimensionVOS[j]
                        this.$set(scoreDimension, 'quotaProperty' , quotaProperty)
                    }
                }
                var newData = data[0].scoreDimensionVOS
                if(data.length == 1){
                    return newData
                }
                for (let i in data) {
                    if(i > 0){
                        newData = newData.concat(data[i].scoreDimensionVOS)
                    }
                }
                return newData
            }
        },
    }
}
</script>
<style scoped>
.el-form >>> .el-form-item__label {
    font-family: "PingFangSC-Regular";
    font-size: 14px;
    color: rgba(0,22,22,0.45);
    letter-spacing: 0;
    line-height: 22px;
}
.el-form >>> .el-form-item__content {
    font-family: "PingFangSC-Regular";
    font-size: 14px;
    color: rgba(0,22,22,0.85);
    letter-spacing: 0;
    line-height: 22px;
}
.titleClass {
    font-family: "HelveticaNeue-Medium";
    font-size: 28px;
    color: #2A2D2E;
    line-height: 36px;
    padding-left: 24px;
}
.el-card-tab >>> .el-card__body {
    padding: 0 12px;
    min-height: 400px;
}
li {
    list-style-type:none;
    line-height: 14px;
    padding: 6px 0;
}
.base-el-card >>> .el-card__body {
    padding: 12px;
}
.score-span {
    font-family: "PingFangSC-Regular";
    color: #848484;
    line-height: 13px;
}
.score-span-content {
    font-family: "PingFangSC-Regular";
    font-size: 14px;
    color: rgba(0,22,22,0.85);
    letter-spacing: 0;
    line-height: 22px;
}
.el-radio >>> .el-radio__label {
    font-family: "PingFangSC-Medium";
    font-size: 13px;
    color: #656666;
    line-height: 14px;
}
.hrClass {
    margin-top: 20px;
    border-width: thin;
    border: 0.5px solid rgba(179,179,179,0.20);
}
</style>
